<template>
  <div class="dashboard-analysis">
    <div class="coms">
      <div class="com">
        <div class="coml">
          <p>{{ date }}</p>
          <p>{{ moment().format('dddd') }}</p>
        </div>
        <div class="hea">欢迎来到{{ title }}！</div>
        <div class="comr">
          <iframe width="250" height="160" frameborder="0" allowtransparency="true"
            src="https://i.tianqi.com?c=code&id=35&color=%23ffffff&icon=1&py=qinshui&site=34"></iframe>
        </div>
      </div>
      <div class="contV">

        <div class="work">
          <div class="worki" v-for="(i, o) in menus" :key="o" @click="toPath(i.path)">
            <div class="workii">
              <a-icon :type="i.meta.icon" />
            </div>
            <div class="workin">{{ i.meta.title }}</div>
          </div>
        </div>

        <div class="contVl">
          <div class="contVli" @click="openQC">
            <img src="@/assets/faset.png" alt="">
            <p>快速问诊</p>
          </div>
        </div>

        <!-- <div class="contVl">
          <div class="user">
            <a-avatar class="avatar" size="small" :src="getAvatar()" />
            <p>Hi，{{ nickname() }}</p>
          </div>
          <div class="userSets">
            <div class="userSet" @click="openSet">
              <a-icon type="setting" />
              <span>&nbsp;系统设置</span>
            </div>
          </div>

          <div class="usermenu">
            <header-notice class="action" />
            <div class="usermenub"></div>
            <a class="logout_title" href="javascript:;" @click="handleLogout">
              <a-icon type="logout" />
              <span>&nbsp;退出</span>
            </a>
          </div>
        </div> -->
      </div>
      <div class="contVr">
        <div class="contVrl">
          <a-carousel :autoplay="true">
            <div class="contVi">
              <img src="@/assets/q6.jpg" alt="">
            </div>
            <div class="contVi">
              <img src="@/assets/q5.jpg" alt="">
            </div>
            <div class="contVi">
              <img src="@/assets/q3.jpg" alt="">
            </div>
            <div class="contVi">
              <img src="@/assets/q4.jpg" alt="">
            </div>
            <div class="contVi">
              <img src="@/assets/q2.jpg" alt="">
            </div>
            <div class="contVi">
              <img src="@/assets/q1.jpg" alt="">
            </div>
          </a-carousel>
        </div>
        <div class="contVrr">
          <a-calendar :header-render="headerRender">
          </a-calendar>
        </div>
      </div>

    </div>
    <QuickConsultation ref="QuickConsultation" />
  </div>
</template>

<script>
import { getAction, deleteAction, putAction, postAction, httpAction, getFileAccessHttpUrl } from '@/api/manage'
import moment from 'moment'
import HeaderNotice from '@/components/tools/HeaderNotice'
import CountTo from 'vue-count-to'
import { filterMenu } from '@/utils/util'
import { mapActions, mapGetters, mapState } from 'vuex'
import QuickConsultation from './modules/QuickConsultation'
export default {
  name: 'Analysis',
  components: { CountTo, QuickConsultation, HeaderNotice },
  data() {
    return {
      moment,
      menus: [],
      title: process.env.VUE_APP_PLATFORM_NAME,
      date: moment().format('YYYY-MM-DD HH:mm:ss'),
      dateFun: null,
    }
  },
  created() {
    this.getDate();
    moment.locale('zh-cn');
    let _menus = filterMenu(this.permissionMenuList, (item) => item.path !== '/none')
    _menus.map(i => {
      if (i.name !== "dashboard-analysis" && i.name !== "others") {
        if (i.children) {
          this.menus.push(...i.children)
        } else {
          this.menus.push(i)
        }
      }
    })
  },
  computed: {
    ...mapState({
      // 主路由
      mainRouters: state => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    })
  },
  mounted() {

  },
  methods: {
    headerRender({ value, type, onChange, onTypeChange }) {
      return (<span></span>);
    },
    ...mapActions(["Logout"]),
    ...mapGetters(["nickname", "avatar", "userInfo"]),
    getAvatar() {
      return getFileAccessHttpUrl(this.avatar())
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that.Logout({}).then(() => {
            // update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
            that.$router.push({ path: '/user/login' })
            window.location.reload()
            // update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel() {
        },
      })
    },
    openSet() {
      this.$router.push({ path: '/isystem/user' })
    },
    openQC() {
      this.$refs.QuickConsultation.show();
    },
    toPath(path) {
      this.$router.push({ path })
    },
    getDate() {
      const that = this
      that.dateFun = setInterval(() => {
        that.date = that.moment().format('YYYY-MM-DD  HH:mm:ss')
      }, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.dateFun)
    this.dateFun = null
  }
}
</script>

<style lang="less" scoped>
.coms {
  user-select: none;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.com {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  text-shadow: 0 0 8px #000;

  .hea {
    padding: 0 50px;
    font-size: 33px;
    font-weight: bolder;
    background: #077762;
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    height: 120px;
    line-height: 120px;
    width: 52vw;
    text-align: center;
  }

  .coml {
    width: 20vw;
    background: #077762;
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: center;
    flex-direction: column;

    p {
      font-size: 26px;
      text-align: center;
      margin-bottom: 10px;
    }

    p:first-of-type {
      font-size: 30px;
    }
  }

  .comr {
    width: 20vw;
    padding-left: 30px;
    box-shadow: 0 0 12px #00423688;
    background: #077762;
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.work {
  display: flex;
  flex-wrap: wrap;
  width: 75vw;

  .worki {
    box-sizing: border-box;
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    height: 95px;
    display: flex;
    align-items: center;
    width: 14vw;
    margin: 10px 0.5vw 0;
    color: #fff;
    transition: all .8s;
    cursor: pointer;
    position: relative;
    background: linear-gradient(to right, #08816b, #16947d);
    text-shadow: 0 0 8px #333;

    &:hover {
      background-size: 200% 200%;
      background-position: -100% -100%;
      box-shadow: 0 0 12px #03a386;
    }

    .workii {
      font-weight: bold;
      font-size: 50px;
      margin: 0 13px;
    }

    .workin {
      font-weight: bold;
      font-size: 20px;
    }
  }
}

p {
  margin: 0;
}

.contV {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 20px 0;

  .contVl {
    width: 20vw;
    height: 300px;
    border-radius: 12px;
    background: linear-gradient(to right, #08816b, #16947d);
    box-shadow: 0 0 12px #00423688;
    cursor: pointer;
    transition: all .8s;

    &:hover {
      background-size: 200% 200%;
      background-position: -100% -100%;
      box-shadow: 0 0 12px #03a386;
    }

    .contVli {
      width: 20vw;
      color: #fff;
      text-shadow: 0 0 12px #333;
      height: 300px;
      text-align: center;
      font-weight: bold;
      font-size: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      img {
        width: 100px;
        height: 100px;
      }


    }

    .user {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;

      .avatar {
        width: 60px;
        height: 60px;
      }

      p {
        margin: 0 0 0 20px;
        color: #fff;
        font-size: 23px;
      }
    }

    .usermenu {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      color: #fff;

      .usermenub {
        width: 2px;
        height: 36px;
        background-color: #fff;
        margin: 0 20px;
      }

      /deep/ .ant-badge {
        span {
          font-size: 22px;
          color: #fff;
        }

        a {
          display: flex;
          align-items: center;
          width: 160px;
          justify-content: center;
          font-size: 22px;
          color: #fff;
          height: 42px;

          &:hover {
            cursor: pointer;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 8px #ccc;

            i,
            span {
              color: #03a386;
            }
          }
        }
      }

      /deep/ i {
        font-size: 28px !important;
        color: #fff;

      }

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;
        width: 160px;
        height: 42px;

        &:hover {
          cursor: pointer;
          background-color: #fff;
          border-radius: 8px;
          box-shadow: 0 0 8px #ccc;

          i,
          span {
            color: #03a386;
          }
        }
      }
    }
  }

  .userSets {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

    .userSet {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 22px;
      width: 260px;
      height: 52px;

      &:hover {
        cursor: pointer;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 8px #ccc;

        i,
        span {
          color: #03a386;
        }
      }
    }
  }


}

.contVr {
  width: 97vw;
  border-radius: 12px;
  margin: 0 auto;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .contVrl {
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    height: 300px;
  }

  /deep/.ant-carousel {
    max-width: 1300px;
    width: 67vw;
  }

  .contVi {
    max-width: 1300px;
    width: 67vw;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;

    img {
      border-radius: 12px;
    }
  }

  .contVrr {
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #08816b, #16947d);
    height: 300px;
    width: 28vw;
    min-width: calc(95vw - 1300px);

    /deep/.ant-fullcalendar-date {
      height: 32px;
    }

    /deep/.ant-fullcalendar-column-header-inner,
    /deep/.ant-fullcalendar-value {
      color: #fff;
    }

    /deep/.ant-fullcalendar-last-month-cell .ant-fullcalendar-value,
    /deep/.ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value {
      color: #ffffff40;
    }

    /deep/.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value,
    /deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value {
      color: #00B494;
    }

    /deep/.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month,
    /deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date {
      border-radius: 8px;
    }

    /deep/.ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover,
    /deep/.ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover {
      border-radius: 8px;

      .ant-fullcalendar-value {
        color: #00B494;
      }
    }
  }
}
</style>